<template>
	<!-- 资金明细页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					资金明细
				<navigator  class="loa_hui" hover-class="none" url="./log">
					资金明细
					<!-- 佣金明细 -->
					</navigator>
			</view>
		</view>
		</view>
		<view class='jmd'>
			<view class="jmd_tit">0.00</view>
			<view class="jmd_text">累计资金(元)</view>
		</view>
		<!-- 列表 start -->
		<view class="mem_ul">
			<view class="mem_li" style="margin-top:20rpx;">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv1.png" class="men_a_left_img" mode="widthFix"></image>
					 可提资金
				</view>
				<view class="men_a_right" style="color: #ff80c0;">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li" style="margin-top:20rpx;">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv2.png" class="men_a_left_img" mode="widthFix"></image>
					 已申请潮人豆
				</view>
				<view class="men_a_right">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv3.png" class="men_a_left_img" mode="widthFix"></image>
					 待到账潮人豆
				</view>
				<view class="men_a_right">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv3.png" class="men_a_left_img" mode="widthFix"></image>
					 无效资金
				</view>
				<view class="men_a_right">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv4.png" class="men_a_left_img" mode="widthFix"></image>
					 成功提现资金
				</view>
				<view class="men_a_right">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li" style="margin-top:20rpx;">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv5.png" class="men_a_left_img" mode="widthFix"></image>
					 待收货资金
				</view>
				<view class="men_a_right">
					0.00元
				</view>
			</view>
			</view>
			<view class="mem_li">
			<view class="mem_a">
				<view class="men_a_left">
					<image src="../../static/fv6.png" class="men_a_left_img" mode="widthFix"></image>
					 未结算资金
				</view>
				<view class="men_a_right">
					<text>{{kls}}</text>元
				</view>
			</view>
			</view>
			<view class="mem_li" style="margin-top:20rpx;">
			<view class="mem_a">
				<view class="men_a_left" style="color:#000">
					 用户须知
				</view>
			</view>
			</view>
			<view class="mem_li">
			<view class="mem_a" style="flex-wrap:wrap;">
				<view class="men_a_left" style="font-size:25rpx;">
					买家确认收货后，立即获得资金明细
				</view>
				<view class="men_a_left" style="width:100%;margin-top:5rpx;font-size:25rpx;">
					注意：可用佣金满
					<text style="color:#ff80c0">10</text>
						元</text>后才能申请提现
				</view>
			</view>
			</view>
			</view>
			
		<navigator hover-class="none" url="" class="tixian" :style="{'background':(kls >=10 ? '#ff80c0' :'#ccc')}">我要提现</navigator>
			
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				kls:0.00
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.switchTab({
				    url: '../commission/commission'
				});
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.mem_ul{
		width:100%;
	}
	.mem_li{
		width:100%;
		background-color: #fff;
	}
	.mem_a{
		border-bottom:2rpx solid rgb(243,243,243);
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:22rpx 0;
	}
	.men_a_left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		color:#555;
	}
	.men_a_left_img{
		width:35rpx;
		margin-right:13rpx;
	}
	.men_a_right_img{
		width:30rpx;
	}
	.jmd{
		padding:60rpx;
		background-color: #ff80c0;
		color:#fff;
		text-align: center;
		margin-top:-17rpx;
	}
	.jmd_tit{
		font-size:55rpx;
		font-weight: 500;
	}
	.jmd_text{
		font-size:28rpx;
	}
	.tixian{
		background: #ff80c0;
		color:#fff;
		text-align: center;
		position: fixed;
		bottom:0;
		padding:25rpx 0;
		font-size:28rpx;
		width:100%;
	}
</style>
